<template>
  <div>
    <el-container>
      <el-collapse-transition>
        <el-aside class="transition-box" width="16%" v-if="isShow" :style="asideStyle">
          <my-aside />
        </el-aside>
      </el-collapse-transition>
      <el-container>
        <el-header style="background-color: #fff; color: #303133" class="headerStyle">
          <div style="position: relative">
            <i :class="isShow ? 'el-icon-s-fold' : 'el-icon-s-unfold'" @click="isShow = !isShow" style="
                position: absolute;
                left: 5px;
                top: 10px;
                font-size: 20px;
                cursor: pointer;
              "></i>
            <div style="
                display: flex;
                justify-content: center;
                align-items: center;
              ">
              <el-avatar src="../../../.././static/images/favicon.jpg"></el-avatar>
              <span> 职业院校智慧教学管理系统</span>
            </div>
            <div v-if="user" style="
                display: flex;
                align-items: center;
                position: absolute;
                right: 0;
                top: 0;
              ">
              <el-badge style="cursor: pointer" :value="messageLength" :hidden="messageLength <= 0" class="item">
                <i class="el-icon-bell" style="font-size: 26px" @click="openMessage"></i>
              </el-badge>
              <el-dropdown trigger="hover">
                <div style="display: flex; align-items: center; cursor: pointer" class="el-dropdown-link">
                  <el-avatar fit="fill" style="margin-right: 15px" :src="user.avatar
                    ? '/api' + user.avatar
                    : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
                    "></el-avatar>
                  <span style="cursor: pointer">
                    {{ user.userName
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="$router.push('/home/modify')">个人中心</el-dropdown-item>
                  <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <el-main @click.native="tabShow">
          <el-tabs @contextmenu.prevent.native="openContextMenu($event)" v-model="tabsValue" type="card" closable
            @tab-remove="tabRemove">
            <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
            </el-tab-pane>
          </el-tabs>
          <div style="padding: 15px">
            <keep-alive :include="keepAliveComponents">
              <router-view :key="$route.fullPath" v-if="isRouteLive"></router-view>
            </keep-alive>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
      <li @click="closeAll">关闭所有</li>
      <li @click="closeOther('other')">关闭其他</li>
    </ul>
    <el-dialog title="通知" :visible.sync="dialogVisible" width="30%" center>
      <div v-if="message.length > 0" style="height: 400px" class="scroll">
        <div v-for="(item, index) in message" :key="index">
          <div style="cursor: pointer">
            <span style="margin-right: 10px">{{ item.title }}</span>
            <span style="margin-right: 10px">发起人:{{ item.createName }}</span>
            <span style="margin-right: 10px">发起时间:{{ item.createTime }}</span>
            <br />
            <span style="color: #999; margin-top: 15px">详细内容:{{ item.content }}</span>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
      <div v-else style="height: 300px; text-align: center; line-height: 300px">
        暂无通知
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myAside from "@/components/Aside.vue";
import Cookie from "js-cookie";
export default {
  name: "Home",
  data() {
    return {
      user: this.$store.state.user,
      visible: false,
      left: 0,
      top: 0,
      message: [],
      dialogVisible: false,
      messageLength: 0,
      isShow: true,
      // 路由跳转后仍然保持存活状态的页面
      keepAliveComponents: [
        "flow",
        "creationproject",
        "teamproject",
        "projectbuild",
        "examineDetails",
        "assess",
        "patrolsinspection",
        "analyzedetails",
        "teacherinspection",
        "teacheranalyzedetails",

      ],
      isRouteLive: true,
    };
  },
  computed: {
    editableTabs: {
      get() {
        return this.$store.state.menu.tabs;
      },
    },
    tabsValue: {
      get() {
        return this.$store.state.menu.tabsValue;
      },
      set(val) {
        this.$store.commit("setTabsValue", val);
        this.$router.push(val).catch((e) => { });
      },
    },
    asideStyle() {
      if (window.innerWidth < 728) {
        return {
          position: 'absolute',
          top: '0',
          zIndex: 100,
          width: '46%',
          height: "100%"
          // 可以添加更多样式属性  
        };
      }
      return {
        width: '16%',
      }; // 屏幕宽度不小于728px时不应用特殊样式  
    },
  },
  methods: {
    openContextMenu(e) {
      e = e || window.event;
      if (e.srcElement.id) {
        this.visible = true;
        let currentId = e.srcElement.id.split("-")[1];
        this.$store.commit("setdbClickId", currentId);
        this.left = e.clientX;
        this.top = e.clientY + 10;
      }
    },
    closeOther(state) {
      if (this.editableTabs.length == 1) return;
      this.$store.commit("closeOther");
    },
    closeAll() {
      if (this.editableTabs.length == 1) return; //必须留一个页面
      this.$store.commit("closeAll");
    },
    logout() {
      this.$post("/api/logout?id=" + this.user.userId).then((res) => {
        if (res.code == 200) {
          this.$router.push("/login");
          window.localStorage.clear();
          window.sessionStorage.clear();
          this.$store.commit("reset");
          Cookie.remove("token");
        }
      });
    },
    tabRemove(target) {
      console.log();
      // this.$store.commit('removeAnalogueTab',this.$route.path)
      this.$store.commit("changeTabs", {
        target,
        flag:
          this.$route.path.indexOf(target) || this.$route.path == target
            ? true
            : false,
      });
    },
    openMessage() {
      this.dialogVisible = true;
      this.$post("/api/readNotice").then((res) => (this.messageLength = 0));
    },
    updateIsShow() {
      // 检查窗口宽度，并更新isShow的值
      if (window.innerWidth < 728) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    tabShow() {
      if (window.innerWidth < 728) {
        this.isShow = false;
      }
    }
  },
  mounted() {
    // 监听屏幕的大小
    this.updateIsShow(); // 组件挂载后立即检查一次
    window.addEventListener("resize", this.updateIsShow); // 添加resize事件监听器
    let thizz = this;
    window.onclick = function () {
      thizz.visible = false;
    };
    this.$get("/api/notices").then((res) => {
      this.message = res.data;
      res.data.map((item) => {
        if (item.status == 0) this.messageLength++;
      });
    });
    this.$bus.$on("changeRouterLive", () => {
      this.keepAliveComponents = [];
      this.$nextTick(() => {
        this.keepAliveComponents = [
          "flow",
          "creationproject",
          "teamproject",
          "projectbuild",
          "examineDetails",
          "assess",
        ];
      });
      console.log("changed");
    });
  },
  components: {
    myAside,
  },
};
</script>

<style scoped>
section {
  padding: 0;
}

>>>.el-tabs__header {
  margin-bottom: 0;
}

.contextmenu {
  width: 100px;
  margin: 0;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}

.contextmenu li {
  margin: 0;
  padding: 5px 5px;
  cursor: pointer;
}

.contextmenu li:hover {
  color: rgb(98 189 255);
  background: #eee;
  cursor: pointer;
}

.el-container {
  height: 100%;
  min-height: 100vh;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  overflow: hidden;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  line-height: 200px;
  height: 100vh;
}

.el-main {
  padding: 0;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.item {
  margin-right: 40px;
}

/deep/ .el-badge__content.is-fixed {
  top: 15px;
  right: 9px;
}

.headerStyle {
  box-shadow: rgba(104, 104, 104, 0.2) 0px 15px 10px -10px;
  margin-bottom: 15px;
}
</style>
